<template>
  <div class="content">
     <span style="float: left;position: relative;top: 0.3125rem;">筛选查询</span>
    <div class="top">
      <span>项目</span>
      <el-select size="small" v-model="option.projectName"  clearable placeholder="全部">
        <el-option v-for="item in options.projectName" :key="item.projectName" :label="item.projectName" :value="item.projectName">
        </el-option>
      </el-select>
    </div>
    <div class="top">
      <span>登记时间</span>
      <el-date-picker size="small" v-model="option.defectCreattime" type="daterange" range-separator="至"
        start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
    </div>
    <div class="top_button">
      <el-button @click="flush()" size="small">刷新</el-button>
      <el-button type="primary" name="but-insert" id="but-insert" @click="selectProption(options)" size="small">搜索
      </el-button>
      <el-button type="danger" name="but-delete" id="but-delete" @click="exportTo()" size="small">导出</el-button>
    </div>
    <div id="main" style="height: 800px;width: 800px;">

    </div>
    </div>
</template>

<script>
  import * as echarts from 'echarts';
  export default{
    name:'Severityrate',
    data() {
      return {

        options: {
           value1: [],
          projectName:[]
        },
        option:{
          defectCreattime: [],
          projectName:''
        },
        Proption: {

        },

      }
      },
      methods: {

        //刷新整个页面
        flush(){
            location.reload()
           },


        findAllprojectname() {
          this.$axios.post("/project/getAllProjectName").then(resp => {
            this.options.projectName = resp.data.data

          })
        },
        selectProption() {

          JSON.stringify(this.option)
          console.log(111)
          console.log(this.option)
          this.$axios.post("/StatisticAlanalysis/SelectAllDefectseverity", this.option).then(resp => {
            this.Proption = resp.data.data
            console.log(this.Proption)
            this.pipe()
          })
        },

        pipe() {

          var chartDom = document.getElementById('main');
          var myChart = echarts.init(chartDom);

         var option = {
           title: {
             text: '严重程度统计',

             left: 'center'
           },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: this.Proption
              }
            ]
          };
          myChart.setOption(option);
        },
        exportTo(){
         // 获取echarts数据
            var cityData = this.Proption
            // excel表头

            var tHead = ['缺陷状态', '状态个数']
            // excel表体
            var tData = [];
            // excel文件名
            var tName = `缺陷状态表`
            // 循环添加excel表体, key需跟表头对应
              cityData.forEach(item => {
                   tData.push({
                     '缺陷状态': item.name,

                     '状态个数': item.value
                   })
                  });

            // 导出
            this.exportDataExcel(tHead, tData, tName)
        }


        },
        created() {
          this.findAllprojectname()
          this.selectProption()
        }

    }
</script>

<style>
  .top {
    position: relative;
    float: left;
    left: 3%;
    /* margin-left: 1.25rem; */
  }

  .time {
    text-align: left;
  }

  .top_button {
    position: relative;
    float: right;
    right: 3%;
  }
  #main{
    position: relative;
    top: 100px;
  }
</style>
